<template>
  <div>
      <button @click="show=!show">切换</button>
       <transition name="jch">
          <div class="box" v-show="show"></div>
       </transition>
        <transition name="jing">
          <div class="box" v-show="show"></div>
       </transition>
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {
       show:false
    }
  }
}
</script>

<style scoped lang="less">
   .box{
     width:400px;
     height: 400px;
     background: yellowgreen;
   }

  //进入阶段
  //开始
  .jch-enter{
    width:0px;
    opacity: 0;
    transform: rotate(0deg);
    border-radius: 0px 0px 0px 0px;
  }
   //过程：定义过渡动画的时间、速率、延迟时间等等
  .jch-enter-active{
     transition: all 2s linear;
   }

  //结束
  .jch-enter-to{
    width:400px;
    opacity: 1;
    transform: rotate(360deg);
    border-radius:50%;
  }



  //离开阶段

  //开始
  .jch-leave{
    width: 400px;
    height: 400px;
    opacity: 1;
    transform: rotate(0deg);
  }

   //过程
   .jch-leave-active{
    transition: all 5s linear;
   }

  //结束
   .jch-leave-to{
    width: 0px;
    height: 0px;
    opacity: 0;
    transform: rotate(360deg);
  }
</style>
